<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseButton color="default">
      <Icon name="lucide:moon" class="-ms-1 h-4 w-4" />

      <span>Button</span>
    </BaseButton>

    <BaseButton color="primary">
      <span>Button</span>

      <Icon name="lucide:arrow-right" class="me-1 h-4 w-4" />
    </BaseButton>

    <BaseButton color="success">
      <Icon name="cib:envato" class="-ms-1 h-4 w-4" />

      <span>Button</span>
    </BaseButton>

    <BaseButton color="info">
      <Icon name="fa:twitter" class="-ms-1 h-4 w-4" />

      <span>Button</span>
    </BaseButton>

    <BaseButton color="warning">
      <Icon name="ion:shapes" class="-ms-1 h-4 w-4" />

      <span>Button</span>
    </BaseButton>

    <BaseButton color="danger">
      <Icon name="ph:heart-duotone" class="-ms-1 h-4 w-4" />

      <span>Button</span>
    </BaseButton>
  </div>
</template>
